<template>
  <div class="message-page">
    <!-- 顶部导航栏 -->
    <div class="top-header">
      <div class="header-left">
        <div class="header-title">消息</div>
        <div class="clear-unread-btn">
          <img class="clear-icon" :src="require('@/assets/images/center/ic_message_clean@3x.webp')" alt="清理消息">
          <span class="clear-text">清除未读</span>
        </div>
      </div>
      <div class="header-right">
        <img class="header-icon" :src="require('@/assets/images/center/fic_navibar_setting@3x.webp')" alt="设置">
      </div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-container">
        <i class="fas fa-search search-icon"></i>
        <input class="search-input" type="text" placeholder="搜索聊天记录/联系人/服务号" v-model="searchQuery">
      </div>
    </div>

    <!-- 消息列表容器 -->
    <div class="message-list-container">
      <!-- 消息项 -->
      <div 
        class="conversation-item" 
        :class="{ 'system-message': message.type === 'system' || message.type === 'official' }"
        v-for="message in messages" 
        :key="message.id">
        <div class="conversation-content">
          <!-- 左侧：头像+信息 -->
          <div class="left-section">
            <div class="avatar-container">
              <img :src="message.avatar" :alt="message.name" class="avatar-img">
            </div>
            
            <div class="message-info">
              <div class="user-name">{{ message.name }}</div>
              <div class="message-text">{{ message.content }}</div>
              <div class="message-time">{{ message.time }}</div>
            </div>
          </div>

          <div class="flex-spacer"></div>

          <!-- 右侧：商品缩略图 -->
          <div class="thumbnail-container" v-if="message.image">
            <img :src="message.image" alt="商品图" class="thumbnail-img">
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <BottomNav />
  </div>
</template>

<script>
import BottomNav from './BottomNav.vue';

export default {
  name: 'MessagePage',
  components: {
    BottomNav
  },
  data() {
    return {
      searchQuery: '',
      messages: [
        {
          id: 1,
          type: 'system',
          name: '通知消息',
          avatar: require('@/assets/images/message/icon_message_notice.webp'),
          content: '你好！这件连衣裙还有M码吗？想了解下面料细节~',
          time: '15分钟前',
          image: 'https://img.alicdn.com/bao/uploaded/i3/O1CN01xY7z8a1WKiE2T9xLa_!!4611686018427385730-53-fleamarket.heic_110x10000Q90.jpg_.webp'
        },
        {
          id: 2,
          type: 'official',
          name: '互动消息',
          avatar: require('@/assets/images/message/icon_message_interact.webp'),
          content: '你好！这件连衣裙还有M码吗？想了解下面料细节~',
          time: '15分钟前',
          image: 'https://img.alicdn.com/bao/uploaded/i3/O1CN01xY7z8a1WKiE2T9xLa_!!4611686018427385730-53-fleamarket.heic_110x10000Q90.jpg_.webp'
        },
        {
          id: 3,
          type: 'user',
          name: '夏日小铺',
          avatar: 'https://img.alicdn.com/bao/uploaded/i3/O1CN01bXaSDA1WKiAyRTmSz_!!4611686018427385730-0-mtopupload.jpg_110x10000Q90.jpg_.webp',
          content: '您好，本店售出的商品一律售出不退不换，介意请慎拍！',
          time: '2024-07-23',
          image: 'https://img.alicdn.com/bao/uploaded/i4/O1CN01cz6YYX1H4TnatRcIs_!!53-fleamarket.heic_110x10000Q90.jpg_.webp'
        },
        {
          id: 4,
          type: 'user',
          name: '车***发',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2104775908&suffix=_120x120.jpg&needHttps=1',
          content: '您好，这个紫光变色龙还在吗？可以便宜一点吗？',
          time: '昨天 14:20',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN01I66kge1tVuuV6ENKR_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
        {
          id: 5,
          type: 'user',
          name: '上***品',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=1729510080&suffix=_120x120.jpg&needHttps=1',
          content: '苹果iPhone15Plus全新未拆封，支持花呗分期',
          time: '2天前',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01ngBHva1CSgcxMbXys_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
        {
          id: 6,
          type: 'user',
          name: '最***下',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2823534690&suffix=_120x120.jpg&needHttps=1',
          content: '亲，戴尔电源还有货吗？可以发顺丰吗？',
          time: '3天前',
          image: 'https://gw.alicdn.com/bao/uploaded/i4/O1CN01FliG5A1kW4SPRPHGU_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
        {
          id: 7,
          type: 'user',
          name: '想***湖',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=11855257&suffix=_120x120.jpg&needHttps=1',
          content: 'HTC 8X还能用吗？有没有磨损？',
          time: '4天前',
          image: 'https://gw.alicdn.com/bao/uploaded/i1/O1CN011UTFXi1ohl4ZDVxaZ_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
        {
          id: 8,
          type: 'user',
          name: '台***售',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=1059805039&suffix=_120x120.jpg&needHttps=1',
          content: '鑫谷电源500W，需要电源线另加3块钱',
          time: '5天前',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN01f4bkpi1n5uhZli9To_!!53-fleamarket.heic_360x10000Q75.jpg_.webp'
        },
        {
          id: 10,
          type: 'user',
          name: '三***家',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=63227504&suffix=_120x120.jpg&needHttps=1',
          content: '三星Chromebook 4K OLED屏幕，i5 16G配置',
          time: '6天前',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN011sbskZ25It1Xr6b5b_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
        {
          id: 11,
          type: 'user',
          name: '梦***航',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=1796363977&suffix=_120x120.jpg&needHttps=1',
          content: '苹果13手机壳4个+全新数据线，江浙沪皖包邮',
          time: '1周前',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01hncZKn1fFWBFwOAKc_!!4611686018427385545-0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
       
        {
          id: 13,
          type: 'user',
          name: 'w***售',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2963275682&suffix=_120x120.jpg&needHttps=1',
          content: 'Wacom数位笔全新未拆封，兼容多个型号',
          time: '1周前',
          image: 'https://gw.alicdn.com/bao/uploaded/i2/O1CN01ef6YLC1rqPSWhgTnS_!!4611686018427387810-0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
        {
          id: 14,
          type: 'user',
          name: '花***8',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=2566475352&suffix=_120x120.jpg&needHttps=1',
          content: 'NiSi耐司150mm方形滤镜，适合大灯泡头',
          time: '2周前',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01g1Eqhv1pPGPwecWWk_!!0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        },
        {
          id: 15,
          type: 'user',
          name: '数***友',
          avatar: 'https://api.goofish.com/m/userAvatar.action?id=532992447&suffix=_120x120.jpg&needHttps=1',
          content: 'Win10/Win11系统盘，技术员必备神器',
          time: '2周前',
          image: 'https://gw.alicdn.com/bao/uploaded/i3/O1CN01DecRYP1TwmD7BSWQ7_!!4611686018427384255-0-fleamarket.jpg_360x10000Q75.jpg_.webp'
        }
      ]
    }
  },
  methods: {
    clearUnread() {
      console.log('清除未读消息');
    },
    openSettings() {
      console.log('打开设置');
    }
  }
};
</script>

<style scoped>
.message-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #fff;
  color: #333;
  line-height: 1.4;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #f5f5f5;
  border-bottom: 0px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 10005;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-title {
  font-size: 23px;
  font-weight: 600;
  color: #333;
  z-index: 2000;
}

.header-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
a, button, img, div[role="button"] {
  outline: none; /* 移除焦点轮廓 */
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击时的背景（适配 Safari/Chrome） */
}
.clear-unread-btn {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 16px;
  padding: 4px 8px;
  cursor: pointer;
  gap: 4px;
}

.clear-icon {
  width: 16px;
  height: 16px;
}

.clear-text {
  font-size: 12px;
  color: #9F9F9F;
  font-weight: 500;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 搜索栏 */
.search-bar {
  background-color: #f5f5f5;
  padding: 8px 16px;
  position: relative;
  z-index: 999;
  margin-top: 50px;
}

.search-container {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 20px;
  padding: 8px 16px;
  gap: 8px;
}

.search-icon {
  font-size: 16px;
  color: #999;
  opacity: 0.8;
}

.search-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

/* 消息列表容器 */
.message-list-container {
  margin-top: 0px;
  /* margin-bottom: px; */
  position: relative;
  background-color: #fff;
}

/* 会话项 */
.conversation-item {
  background-color: #fff;
  padding: 4px;
  border-bottom: 1px solid #f0f0f0;
}

/* 系统消息和官方消息使用浅灰色背景 */
.conversation-item.system-message {
  background-color: #f5f5f5;
}

.conversation-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 8px 12px;
}

/* 左侧区域 */
.left-section {
  display: flex;
  flex-direction: row;
}

.avatar-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.avatar-img {
  object-fit: cover;
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 22px;
}

.message-info {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.user-name {
  font-weight: 500;
  font-size: 14px;
  color: rgb(51, 51, 51);
  line-height: 1.28571;
  display: flex;
  align-items: center;
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.message-text {
  text-overflow: ellipsis;
  max-height: 20px;
  max-width: 165px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  color: rgb(163, 163, 163);
  margin-top: 2px;
  line-height: 1.33333;
}

.message-time {
  display: block;
  font-size: 10px;
  color: rgb(163, 163, 163);
  padding-top: 4px;
  line-height: 1;
}

/* 弹性占位 */
.flex-spacer {
  flex-grow: 1;
}

/* 缩略图 */
.thumbnail-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.thumbnail-img {
  object-fit: cover;
  width: 50px;
  height: 50px;
  border-radius: 8px;
}
</style>
